<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Pisces","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/js/config.js"></script>
<meta name="description" content="DOCTYPEDOC 是 document 文档的意思，type 是类型的意思–也就是说告诉浏览器用什么规范渲染页面  从这各点可以引入[“怪异模式”]  严格模式&#x2F;怪异模式Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？  严格模式怪异模式的理解。 严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doct">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML">
<meta property="og:url" content="http://example.com/2020/09/15/HTML%E4%BD%93%E7%B3%BB/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="DOCTYPEDOC 是 document 文档的意思，type 是类型的意思–也就是说告诉浏览器用什么规范渲染页面  从这各点可以引入[“怪异模式”]  严格模式&#x2F;怪异模式Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？  严格模式怪异模式的理解。 严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doct">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-09-15T06:20:05.000Z">
<meta property="article:modified_time" content="2021-07-15T06:48:29.354Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/2020/09/15/HTML%E4%BD%93%E7%B3%BB/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://example.com/2020/09/15/HTML%E4%BD%93%E7%B3%BB/","path":"2020/09/15/HTML体系/","title":"HTML"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>HTML | Hexo</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Hexo</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-首页"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-分类"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#DOCTYPE"><span class="nav-number">1.</span> <span class="nav-text">DOCTYPE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F-%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">严格模式&#x2F;怪异模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F-%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F-1"><span class="nav-number">3.</span> <span class="nav-text">严格模式&#x2F;怪异模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML5-%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="nav-number">4.</span> <span class="nav-text">HTML5 新增属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%B0%E5%BF%86%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.</span> <span class="nav-text">记忆方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#iframe%E3%80%82"><span class="nav-number">5.</span> <span class="nav-text">iframe。</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%99%E8%BF%B0%E6%80%9D%E8%B7%AF"><span class="nav-number">5.1.</span> <span class="nav-text">叙述思路</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E6%A1%A3%E6%B5%81"><span class="nav-number">6.</span> <span class="nav-text">文档流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E6%9D%A5%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="nav-number">7.</span> <span class="nav-text">如何来清除浮动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#a-%E6%A0%87%E7%AD%BE%E7%9A%84-4-%E4%B8%AA%E4%BC%AA%E7%B1%BB%E7%9A%84%E6%AD%A3%E7%A1%AE%E9%A1%BA%E5%BA%8F%EF%BC%8C%E5%B9%B6%E8%A7%A3%E9%87%8A"><span class="nav-number">8.</span> <span class="nav-text">a 标签的  4 个伪类的正确顺序，并解释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#bfc"><span class="nav-number">9.</span> <span class="nav-text">bfc</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-%E4%BA%8B%E4%BB%B6%E4%BD%93%E7%B3%BB%EF%BC%8C%E5%86%92%E6%B3%A1"><span class="nav-number">10.</span> <span class="nav-text">DOM 事件体系，冒泡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#meta-%E6%A0%87%E7%AD%BE"><span class="nav-number">11.</span> <span class="nav-text">meta 标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%83%E5%B1%80"><span class="nav-number">12.</span> <span class="nav-text">布局</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80"><span class="nav-number">12.1.</span> <span class="nav-text">两栏布局</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80"><span class="nav-number">12.2.</span> <span class="nav-text">三栏布局</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#BFC-%E5%9D%97-IFC"><span class="nav-number">13.</span> <span class="nav-text">BFC 块 &#x2F;IFC</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%AE%BE%E7%BD%AE-over-flow-hidden-%E5%8F%AF%E4%BB%A5%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="nav-number">13.1.</span> <span class="nav-text">为什么设置 over-flow:hidden,可以清除浮动</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#IFC"><span class="nav-number">13.2.</span> <span class="nav-text">IFC</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">John Doe</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">20</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
  </nav>
</div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/09/15/HTML%E4%BD%93%E7%B3%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          HTML
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-09-15 14:20:05" itemprop="dateCreated datePublished" datetime="2020-09-15T14:20:05+08:00">2020-09-15</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/html/" itemprop="url" rel="index"><span itemprop="name">html</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <!DOCTYPE html>
<h3 id="DOCTYPE"><a href="#DOCTYPE" class="headerlink" title="DOCTYPE"></a>DOCTYPE</h3><p>DOC 是 document 文档的意思，type 是类型的意思–也就是说<strong>告诉浏览器用什么规范渲染页面</strong></p>
<ol start="2">
<li><p>从这各点可以引入[“怪异模式”]</p>
<blockquote>
<h3 id="严格模式-怪异模式"><a href="#严格模式-怪异模式" class="headerlink" title="严格模式/怪异模式"></a>严格模式/怪异模式</h3><p><strong>Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？</strong></p>
<ol>
<li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/ltt2017/archive/2017/04/28/6783787.html">严格模式怪异模式的理解</a>。</li>
<li>严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML</li>
<li>怪异模式/混杂模式： 按各个浏览器的标准来，目的：兼容旧浏览器。//这个理解</li>
<li>我个人理解就是说这个之前有些浏览器不是按照 w3c 的要求来渲染的，这就导致了这个不同浏览器渲染机制不太一样为了能够一样。</li>
</ol>
</blockquote>
<p>。</p>
</li>
</ol>
<h3 id="严格模式-怪异模式-1"><a href="#严格模式-怪异模式-1" class="headerlink" title="严格模式/怪异模式"></a>严格模式/怪异模式</h3><p><strong>Doctype 的作用？标准（严格）模式，怪异（混杂）模式的区别，它们的意义？</strong></p>
<ol>
<li><a target="_blank" rel="noopener" href="https://www.cnblogs.com/ltt2017/archive/2017/04/28/6783787.html">严格模式怪异模式的理解</a>。</li>
<li>严格模式：按照最标准的格式，来进行页面布局&amp;渲染界面。&lt;! Doctype HTML&gt; Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML Doctype HTML</li>
<li>怪异模式/混杂模式： 按各个浏览器的标准来，目的：兼容旧浏览器。//这个理解</li>
<li>我个人理解就是说这个之前有些浏览器不是按照 w3c 的要求来渲染的，这就导致了这个不同浏览器渲染机制不太一样为了能够一样。</li>
</ol>
<h3 id="HTML5-新增属性"><a href="#HTML5-新增属性" class="headerlink" title="HTML5 新增属性"></a>HTML5 新增属性</h3><ol>
<li><strong>语义化</strong>元素，比如 footer、header、nav、section，用这些语义化除了有利于代码可读性，更重要的是有利于 seo 优化,简单来讲就是，有利于爬虫爬取数据。从而提升网站的排名。</li>
<li><strong>Localstorage:</strong> 数据永久存储在浏览器缓存里，除非人为删除我在做 JWT 鉴权时将 token 值用用 localstorage 存储，SessionStorage，session 会话，也就是说，一旦，浏览器关闭，缓存就会消失。</li>
<li><strong>data</strong>-src : 特点凡是用到了 data 的都是<strong>自定义属性</strong>： –》怎么用<strong>图片懒加载</strong>：就是当需要显示的时候才会通过 js 获取 data-src:里的真实地址，然后在赋值给 Img 里的 src;</li>
<li>canvas 画布</li>
<li>video audio ,嵌入视频和音频。更动感。</li>
</ol>
<h4 id="记忆方法"><a href="#记忆方法" class="headerlink" title="记忆方法"></a>记忆方法</h4><ol>
<li>我无（5）语（语义化）了（L），需要看好看的图片（data-src),画布（canves）和视频(audio)来缓解。</li>
</ol>
<h3 id="iframe。"><a href="#iframe。" class="headerlink" title="iframe。"></a>iframe。</h3><h4 id="叙述思路"><a href="#叙述思路" class="headerlink" title="叙述思路"></a>叙述思路</h4><ol>
<li>首先最重要的一点就是说会影响 <strong>seo</strong>，爬虫不识别</li>
<li>阻塞 Onload 事件。意思就是所有的，资源加载完毕，并且等待 iframe 页面加载完毕后才会去执行 onload，所以会阻塞。</li>
<li>影响并行加载，iframe 的页面和主页面在同一个域名下，他们之间是并行加载关系，而浏览器资源有限，所以影响。</li>
<li>怎么改善就是说通过 js 动态给 iframe 设置页面地址。</li>
</ol>
<h3 id="文档流"><a href="#文档流" class="headerlink" title="文档流"></a>文档流</h3><p>[文档流.emmx]</p>
<h3 id="如何来清除浮动"><a href="#如何来清除浮动" class="headerlink" title="如何来清除浮动"></a>如何来清除浮动</h3><ol>
<li>联想 clear，看见这个清除，联想 <strong>clear</strong></li>
<li>clear: both. //额外标签法，在最后一个浮动元素后，设置一个额外的标签然后，再去设置 clear:both //创造了额外标签，语义化不好。</li>
<li>清除元素，这个是最优的，因为，给父元素上用的，防止其高度塌陷伪元素独立于 dom 树之外，所以它不会去参与 dom 树的构建，```//它没有添加额外标签，也没有像这个 overflowhidden：有副作用。这个不要把::伪类元素给忘记了，就是这个就是模拟的这个，额外标签的方法，但是这个伪元素又是独立于文档树之外的。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> .clearfix ：：after&#123;</span><br><span class="line">content=&#x27;&#x27;;</span><br><span class="line">display: block; //类似于创造了一个额外的标签进行清除浮动，//并且由于这个伪元素是行内元素所以需要转为这个块级元素。</span><br><span class="line">clear:both;  //:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？</span><br><span class="line">我们添加一条IE 6的独有命令&quot;zoom:1;&quot;就行了，这条命令的作用是激活父元素的&quot;hasLayout&quot;属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。</span><br></pre></td></tr></table></figure></li>
<li>还有 overflow:hidden 原理是给父元素利用触发了 bfc 块， 它计算高度的时候是考虑浮动元素的高度的，所以可以去清除这个浮动。</li>
</ol>
<h3 id="a-标签的-4-个伪类的正确顺序，并解释"><a href="#a-标签的-4-个伪类的正确顺序，并解释" class="headerlink" title="a 标签的  4 个伪类的正确顺序，并解释"></a>a 标签的  4 个伪类的正确顺序，并解释</h3><ol>
<li>LVHA ：（层级覆盖的原理）就是:hover 必须要放最后，这样做能够确保让用户知道这个元素是可以访问的所以这个必须放在最后面。然后 link 就是有链接就有样式，:visited 为了区别这个链接是否被访问，这个放其后，a 和 h 的关系随意，一个是鼠标放上去，一个是点击，但是弹起中的触发，所以两者不会冲突。</li>
</ol>
<h3 id="bfc"><a href="#bfc" class="headerlink" title="bfc"></a>bfc</h3><ol>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/mevicky/article/details/47008939">bfc 理解</a>。</li>
<li>设置 BFC 时候，display 可以设置成什么</li>
</ol>
<h3 id="DOM-事件体系，冒泡"><a href="#DOM-事件体系，冒泡" class="headerlink" title="DOM 事件体系，冒泡"></a>DOM 事件体系，冒泡</h3><ol>
<li>哪些事件没有冒泡：不支持冒泡：妈（mouseenter）妈(mouseleave)不(blur)放(focus)心你(unload,load,resize)。</li>
<li>事件委托就是依赖于，捕获冒泡的原理来解决这个问题的，通过不断的冒泡 [DOM 事件体系，及冒泡事件委托.emmx]</li>
</ol>
<h3 id="meta-标签"><a href="#meta-标签" class="headerlink" title="meta 标签"></a>meta 标签</h3><h3 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h3><ol>
<li>凡是布局首先应该联想到这个，浮动，flex 定位，bfc。</li>
</ol>
<h4 id="两栏布局"><a href="#两栏布局" class="headerlink" title="两栏布局"></a>两栏布局</h4><ol>
<li>左列定宽，右列自适应，定位，就是右边的定位为 left 为左边定宽的距离，上右都为 0 这样就可以了。</li>
<li>flex 就是父级 flex 布局，然后，flex- grow =1 就可以让剩余的元素来，填充剩下的内容。</li>
<li>浮动布局–》当需要两个元素同属一行的时候就应该想到然后，就是块级元素默认是 100% 宽度，所以只让左定宽元素去浮动，右元素仅仅去设置左边距，本身就是 100% 宽度。</li>
</ol>
<h4 id="三栏布局"><a href="#三栏布局" class="headerlink" title="三栏布局"></a>三栏布局</h4><ol>
<li><p>左右两列定宽，右列自适应。就可以利用[“BFC 块”</p>
<blockquote>
<h3 id="BFC-块-IFC"><a href="#BFC-块-IFC" class="headerlink" title="BFC 块 /IFC"></a>BFC 块 /IFC</h3><h4 id="为什么设置-over-flow-hidden-可以清除浮动"><a href="#为什么设置-over-flow-hidden-可以清除浮动" class="headerlink" title="为什么设置 over-flow:hidden,可以清除浮动"></a>为什么设置 over-flow:hidden,可以清除浮动</h4><ol>
<li>要了解 bfc 块，内部的块级元素会垂直摆放，同属于一个 bfc 块会发生 margin 重叠，那么消除这样的 bug 就可以给其中一个元素在套一个容器让他成为令一个新的 bfc 块（还要设置一个 over-flow:hidden).</li>
<li>给父元素加了一个 over-flow:hidden 就是为了使用 bfc 块的特性：在计算 bfc 块的高度时会计算里面浮动元素的高度，这样看上去就把浮动元素包裹了起来。</li>
<li>注意一下如何使用 BFC 消除 margin 重叠，</li>
<li>首先你要去明确就是重叠这个现象只出现在垂直的方向，水平方向是没有的</li>
<li>overflow:hidden;bfc 块的特性就是，紧贴浮动元素，所以直接就在两边。也可以用来去做这个浮动元素。</li>
<li><strong>可以触发 BFC</strong> 的属性有 float、position、overflow、display：table-cell/ inline-block/table-caption</li>
</ol>
<h4 id="IFC"><a href="#IFC" class="headerlink" title="IFC"></a>IFC</h4><ol>
<li>IFC（Inline formatting contexts）：<strong>内联格式上下文</strong> IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。 那么 IFC 一般有什么用呢？ <strong>水平居中</strong>：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。 <strong>垂直居中</strong>：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。</li>
</ol>
</blockquote>
<p> 的特点：紧贴着浮动的元素，</p>
</li>
<li><p>就是定义页面元信息，告诉机器如何渲染页面的，方便搜索引擎，有利于 seo 优化的。</p>
</li>
<li><p>比如 name:viewport 移动端布局的，告诉机器如何来渲染界面。</p>
</li>
<li><p>比如申明文档的编码格式为 UTF-8 等。</p>
</li>
</ol>

    </div>

    
    
    

    <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2020/09/12/%E7%9B%92%E6%A8%A1%E5%9E%8B/" rel="prev" title="盒模型">
                  <i class="fa fa-chevron-left"></i> 盒模型
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2020/11/12/es6/" rel="next" title="Es6">
                  Es6 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">John Doe</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  





</body>
</html>
